<template>
  <div class="footer-box" id="footer-box">
    <div
      :class="['footer-box-btn', index == m ? 'btn-show' : '']"
      v-for="(item, index) in footerlist"
      :key="index"
    >
      <router-link :to="item.router"><div></div></router-link>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    footerlist() {
      return this.$store.state.footer.footerlist;
    },
    m() {
      return this.$store.state.footer.m;
    },
  },
  created() {
    let { footerlist } = this.$store.state.footer;
    footerlist.forEach((val) => {
      if (this.$route.path == val.router) {
        this.$store.commit("footer/check", val.id);
      }
    });
  },
  watch: {
    $route(to, from) {
      let { footerlist } = this.$store.state.footer;
      footerlist.forEach((val) => {
        if (to.path == val.router) {
          this.$store.commit("footer/check", val.id);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/footer.css");
</style>